<template>
  <div v-loading="loading">
    <div class="select-column">
      <el-popover
        placement="bottom"
        title=""
        width="80"
        trigger="click"
        align="center"
      >
        <div class="content">
          <el-checkbox-group v-model="checkedTableColumns">
            <el-checkbox
              v-for="column in tableColumns"
              :key="column.prop"
              :label="column.prop"
              :disabled="column.disabled"
              >{{ column.label }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
        <el-button slot="reference">列名选择</el-button>
      </el-popover>
    </div>
    <el-table
      :data="tableData"
      border
      @selection-change="selectionChangeHandle"
      @row-click="rowClickHandle"
      :span-method="spanMethodHandle"
    >
      <!-- 多选框 -->
      <slot name="checkBox"></slot>
      <!-- 索引 -->
      <slot name="index"></slot>
      <!-- 数据 -->
      <el-table-column
        v-for="column in bindTableColumns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
        align="center"
        stripe
      >
        <template slot-scope="scope">
          <!-- <span v-if="scope.column.property === 'status'" @click="clickHandle" :style="{ 'color': statusColors[scope.row.status]}">
            {{ monitiorStateFormat(scope.row) }}
          </span> -->

          <!-- 状态处理 -->
          <el-tooltip placement="top" v-if="scope.column.property === 'status'">
            <div slot="content">
              <!-- <p>上一次比差评估值: {{ scope.row.lastError }}</p> -->
              <p>上一次比差评估值: 1</p>
              <p>本次比差评估值: 2</p>
            </div>
            <span
              :style="{ color: statusColors[scope.row.status] }"
              class="link-type"
              @click.stop="statusClickHandle(scope.row)"
              >{{ monitiorStateFormat(scope.row) }}</span
            >
          </el-tooltip>

          <!-- 点击处理 -->
          <div
            v-else-if="scope.column.property === 'date'"
            @click="dateClickHandle"
          >
            {{ scope.row[scope.column.property] }}
          </div>

          <span v-else>
            {{ scope.row[scope.column.property] }}
          </span>
        </template>
      </el-table-column>
      <!-- 操作按钮插槽 -->
      <slot name="handle"></slot>
    </el-table>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
    tableColumns: {
      type: Array,
      default: () => [],
    },
    loading: {
      type: Boolean,
      default: false,
    },
    mergeArr:{
      type:Array,
      default:()=>[]
    }
  },
  data() {
    return {
      monitiorStateOptions: [
        {
          dictLabel: "正常",
          dictValue: 0,
        },
        {
          dictLabel: "告警",
          dictValue: 1,
        },
        {
          dictLabel: "异常",
          dictValue: 2,
        },
      ],
      statusColors: ["red", "yellow", "orange"],
      red: "red",
    };
  },
  computed: {
    bindTableColumns() {
      // 过滤table需要显示的列(字段)
      return this.tableColumns.filter((column) => column.show);
    },
    /* 这里使用了getter和setter，这样写的好处不用自己手动监听复选框的选中事件 */
    checkedTableColumns: {
      get() {
        // 返回选中的列名el-checkbox-group
        return this.bindTableColumns.map((column) => column.prop); // 这里只需要返回prop值
      },
      set(checked) {
        // 设置表格列的显示与隐藏
        this.tableColumns.forEach((column, index) => {
          // 如果选中，则设置列显示
          if (checked.includes(column.prop)) {
            column.show = true;
            if (checked.length < 3) {
              column.disabled = true;
            } else {
              column.disabled = false;
            }
          } else {
            // 如果未选中，则设置列隐藏
            column.show = false;
          }
        });
      },
    },
  },
  watch: {},
  created() {},
  mounted() {
    // console.log('saa',this.tableColumns)
  },
  activated() {},
  deactivated() {},
  updated() {},
  destroyed() {},
  methods: {
    selectDictLabel(datas, value) {
      var actions = [];
      // console.log('')
      Object.keys(datas).map((key) => {
        if (datas[key].dictValue == "" + value) {
          actions.push(datas[key].dictLabel);
          return false;
        }
      });
      return actions.join("");
    },
    // 合并方法
    spanMethodHandle({ row, column, rowIndex, columnIndex }) {
      if (this.mergeArr.indexOf(column.property) > -1) {
        if (rowIndex % 3 === 0) {
          return {
            rowspan: 3,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    // 监控状态字典翻译
    monitiorStateFormat(row, column) {
      return this.selectDictLabel(this.monitiorStateOptions, row.status);
    },
    // 多选事件
    selectionChangeHandle(rows) {
      this.$emit("selection-handle", rows);
    },
    // 字段点击事件
    statusClickHandle(row, column) {
      this.$emit("status-handle", row);
    },
    // 行单击事件
    rowClickHandle(row) {
      this.$emit("row-handle", row);
    },
    // 列单击事件
    dateClickHandle(row) {
      this.$emit("date-handle", row);
    },
  },
  filters: {},
};
</script>
<style scoped>
.select-column {
  float: right;
}
.el-checkbox-group {
  /* display: flex; */
  /* flex-direction: column; */
}
.normal {
  color: blue;
}
.warn {
  color: orange;
}
.noNormal {
  color: green;
}

.content {
  width: 100%;
  margin: 0 auto;
}
.el-checkbox-group {
  display: flex;
  width: 100%;
  flex-direction: column;
}
.el-checkbox {
  flex: 1;
}
</style>
